<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>对象参数</title>
    </head>
    <body>
        <div id='app'>
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于我们</router-link>
            <router-link to="/cart">购物车</router-link>
            <router-link to="/me">我的</router-link>
            <router-view></router-view>
        </div>
        <script src='../js/vue.js'></script>
        <script src="../js/vue-router.js"></script>
        <script>
            var home = {
                template: `<div>我是首页</div>
`
            }
            var about = {
                template: `<div>我是 关于我们</div>`
            }
            var cart = {
                template: `
                  <div>
                  购物车
                  <button @click="goHome">返回首页</button>
                  <button @click="goBack">返回上一页</button>
                  <button @click="goRefresh">强制刷新</button>
                  </div>`,
                methods: {
                    goHome() {
                        //返回首页,push 可以返回任何页面 ，参数：页面地址
                        this.$router.push('/');
                    },
                    goBack() {
                        //go(-1) 返回上一页
                        this.$router.go(-1);
                    },
                    goRefresh() {
                        //go(0) 强制刷新页面
                        this.$router.go(0);
                    }
                }

            }
            var me = {
                template: `
                  <div>我的
                  <button @click="goBack">返回上一页</button>
                  <button @click="goHome">返回首页</button>
                  </div>`,
                methods: {
                    goHome(){
                        this.$router.push({name:"home"})
                    },
                    goBack() {
                        this.$router.go(-1);
                    }
                }
            }


            var routes = [
                {"path": "/", component: home,name:"home"},
                {"path": "/about", component: about,name:"about"},
                {"path": "/cart", component: cart,name:"cart"},
                {"path": "/me", component: me,name:"me",}
            ];
            var router = new VueRouter({
                routes
            })
            var vm = new Vue({
                el: '#app',
                data: {},
                router
            });
        </script>
    </body>
</html>